<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Car List - #{msgs.title}</title>
 
<!--   The CSS needs to be local otherwise the background does not work...We'll have to figure this out after the prototype -->
<style type="text/css"><!--
/*  body und schrift deffinitionen */
body {
  background-color: #5E7BC2;
  background-image:url('resources/images/background.png');
  font-size: 13px;
  font-family: Arial, SunSans-Regular, Sans-Serif;
  color:#5E7BC2;  
  padding:0;
  margin:0;
}

a { 
color: #5E7BC2;
text-decoration: none; 
}
 

h1 {
font-size: 16px;
text-transform:uppercase;
color: #564b47;
background-color: #5E7BC2;
padding:0px 15px;
margin:0px
}

h2 {
font-size:16px;
padding-top:0px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}

.logo { margin: 0px 0; }

p, h2, pre {
margin: 0; 
padding: 5px 20px; 
}

/*  positioning-layers statisch und absolut */

#left {
position: absolute;
left: 0;
width: 20%;
}

#content {
margin: 0 20%;
border: 2px solid #564b47;
border-top: none;
background-color: #ffffff;    
}

#right {
position: absolute;
right: 0;        
width: 220px;

}
table img
{
 vertical-align: bottom;
}
td,th {
  text-align: center;
}
-->


</style>
</h:head>
    <h:body styleClass="body">

        <!--<img src ="resources/images/banner.png"/>-->
        <table><td width="30%"></td><td><h:graphicImage value="resources/images/banner.png"/></td></table>

        <h1>
            <table valign="bottom" cellpadding="0" cellspacing="0" height="42">
                <td width="20%"></td>
               <td width="100px"><h:commandButton value="home" action="index.xhtml"/></td>
        <td width="100px"><h:commandButton value="search" action="search"/></td>
           <td width="100px"><h:commandButton value="register" action="registration"/></td>
                <td width="60px"><font color="white"></font></td>

                <h:form rendered="#{!userBean.loggedIn}">
                    <td width="700px">
                        <font color="white">User Name:</font><h:inputText value="${userBean.userName}" size="10"/>
                        <font color="white">Password:</font><h:inputSecret value="${userBean.password}" size="10"/>
                        <h:commandButton value="Log In" action="${userBean.loginUser()}"/>
                    </td>
                </h:form>
                <h:form rendered="#{userBean.loggedIn}">
                    <td width="700px">
                        <h:commandLink value="${userBean.userName}" action="user.xhtml" styleClass="link"/>
                    </td>
                </h:form>
                <td width="20%"><font color="white"></font></td>
            </table>
        </h1>
        <div id="left">
            <h2>
            </h2>
        </div>
        <div id="right">
            <h2>
            </h2>
        </div>
        <div id="content">
            <h2>
               <t>You have successfully logged out! <br></br> </t>
            <h:commandButton value="Return Home" action="home" ></h:commandButton>
            </h2>
        </div>
    </h:body>
</html>
